<template>
  <div class="main">
      <router-view></router-view>
      
    <div class="bottom-nav">
      <van-tabbar v-model="active"  route>
      <van-tabbar-item
        v-for="(item, index) in tabbarData"
        :key="index"
        :to="{ name: item.routerName }"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// :to="{ name: item.routerName }"

export default {
  name: "Main",
  created() {
  },
  data() {
    return {
      active: 2,
      tabbarData: [
        {
          title: "书架",
          routerName:'BookShelf',
          activeIcon: require("../assets/bookshelf-black.png"),
          inactiveIcon: require("../assets/bookshelf.png"),
        },
        {
          title: "书城",
          routerName:'BookTown',
          activeIcon: require("../assets/booktown-black.png"),
          inactiveIcon: require("../assets/booktown.png"),
        },
        {
          title: "分类",
          routerName:'Classify',
          activeIcon: require("../assets/classify-black.png"),
          inactiveIcon: require("../assets/classify.png"),
        },
        {
          title: "我的",
          routerName:'Mine',
          activeIcon: require("../assets/mine-black.png"),
          inactiveIcon: require("../assets/mine.png"),
        },
        
      ],
    };
  },
  methods:{
  
  }
};
</script>
